<template>
  <div class="offset-test">
    <h2>offset测试</h2>
    <div class="offset-gf">
      <div class="offset-fs"></div>
      <div class="offset-f">
        <div class="offset-c"
          style="width: 60px;padding:5px"
          ref="child"></div>
      </div>
    </div>
    <div>
      <el-button size="small"
        @click="getOffset"
        plain>获取offset</el-button>
      <el-button size="small"
        @click="getStyle"
        type="primary"
        plain>获取style</el-button>
    </div>
    <div>offsetLeft --- {{oLeft}}&nbsp;&nbsp;&nbsp;offsetTop --- {{oTop}}</div>
    <div>style.width --- {{sWidth}}&nbsp;&nbsp;&nbsp;style.marginTop --- {{sMarginTop}}</div>
    <p><strong>offset系列</strong></p>
    <p>数字类型，只读属性，相对于第一个定位的父级的位置，没有参照点就是body。</p>
    <p>如果当前定位元素本身是固定定位(position:fixed;)，返回的是当前元素与可视窗口的距离。</p>
    <p>offsetHeight | offsetWidth = content系列 + padding系列 + boder系列</p>
    <p><strong>style系列</strong></p>
    <p>style.xxx 获取到的是字符串，可读可写。</p>
    <p>style.xxx 只有内联样式里写了值才能获取到。</p>
    <p>style.width不管盒模型，就是content的width值。</p>
    <p>假设都绑定了内联样式，offsetHeight | offsetWidth = style.height | style.width + style.padding系列 + style.border系列</p>
  </div>
</template>

<script>
  export default {
    name: 'offsettest',
    data() {
      return {
        oLeft: 0,
        oTop: 0,
        sWidth: '',
        sMarginTop: ''
      };
    },
    methods: {
      getOffset() {
        let dom = this.$refs.child;
        let { offsetLeft, offsetTop } = dom;
        console.log('dom', dom);
        this.oLeft = offsetLeft;
        this.oTop = offsetTop;
      },
      getStyle() {
        let dom = this.$refs.child;
        let thestyle = dom.style;
        console.log(thestyle);
        let { width, marginTop } = thestyle;
        this.sWidth = width;
        this.sMarginTop = marginTop;
      }
    }
  };
</script>

<style lang="scss" scoped>
  .offset-test {
    position: relative;
    .offset-gf {
      position: relative;
      width: 100%;
      height: 120px;
      background-color: #096;
    }
    .offset-fs {
      width: 100%;
      height: 30px;
      background-color: #09f;
    }
    .offset-f {
      margin: 10px;
      padding: 10px;
      background-color: #ff0099;
    }
    .offset-c {
      // width: 60px;
      height: 30px;
      margin-top: 10px;
      background-color: #ff6600;
    }
  }
</style>


